<template>
  <div class="popup" id="moveDiv">
    <EasyScrollbar :barOption="listBar">
      <div id="box" class="box">
        <h1 class="highlight">城市路况指标算法说明</h1>
        <template v-for="(item,index) in descText">
          <h2 class="highlight"><span class="tip">{{index+1}}.</span>{{item.title}}</h2>
          <p>{{item.content}}</p>
        </template>

        <h2 class="highlight"><span class="tip">5.</span>常发拥堵路段（历史小时）</h2>
        <p>在某小时内以一定频率出现严重拥堵的路段，区分工作日和非工作日。具体阈值：</p>
        <ul>
          <li><span class="highlight"><span>①</span> 月工作日小时常发拥堵路段：</span>该月所有N个工作日该小时内，大于或等于N-8个小时为小时拥堵路段。</li>
          <li><span class="highlight"><span>②</span> 月非工作日小时常发拥堵路段：</span>该月所有N个非工作日该小时内，大于或等于N-2个小时为小时拥堵路段。</li>
          <li><span class="highlight"><span>③</span> 年工作日小时常发拥堵路段：</span>该年所有N个工作日该小时内，大于或等于N-188个小时为小时拥堵路段。</li>
          <li><span class="highlight"><span>④</span> 年非工作日小时常发拥堵路段：</span>该年所有N个非工作日该小时内，大于或等于N-68个小时为小时拥堵路段。</li>
          <li><span class="highlight"><span>⑤</span> 小时拥堵路段：</span>该路段在该小时内累计严重拥堵时间大于或等于15min。</li>
        </ul>

        <h2 class="highlight"><span class="tip">6.</span>偶发拥堵路段（实时）</h2>
        <p>路段实时处于严重拥堵状态，而非该时段的上月常发拥堵路段。</p>

        <p class="text-tip">注：各路段运行状况等级划分、严重拥堵里程比例与城市运行状况转换关系、延时指数与城市运行状况转换关系根据GB/T 33171-2016确定，时空拥堵指数与城市运行状况转换关系参考相关研究结论结合数据标定。</p>
      </div>
    </EasyScrollbar>
  </div>
</template>

<script>
  export default {
    name: 'AlgorithmDesc',
    data () {
      return {
        descText: [
          {
            title: '延时指数',
            content: '道路实际通行时间与自由流（畅通）状态下通行时间比值，比值>=1。从时间维度来表征路网的拥堵状况，指标值越大，代表路网道路运行效率越低，出行耗时越长。'
          },
          {
            title: '延时指数标准差',
            content: '辅助指标，某个空间范围内不同路段延时指数的标准差。在延时指数相同的条件下，标准差越大，表明该区域内不同道路拥堵情况的差异越大，可靠性低；标准差越小，表明不同路段运行状况差异越小。'
          },
          {
            title: '拥堵里程比例',
            content: '道路网中严重拥堵路段的里程占比，比值0-1。该指标从空间维度来表征道路网的拥堵状况，指标值越大，代表路网严重拥堵路段占比越高。'
          },
          {
            title: '时空拥堵指数',
            content: '道路网中拥堵（中度拥堵及以上）路段长度与对应拥堵时间的乘积占比（占路网总长度与统计时段乘积的比值），比值0-1。从时空维度来表征路网的拥堵状况，指标值越大，代表路网拥堵持续时间越长，拥堵覆盖范围越广。'
          }
        ],
        listBar: {
          barColor: "#2f3f4f",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 3,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },

        flags: false,
        position: {
          x: 0,
          y: 0
        },
        nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: ''
      }
    },
    mounted(){

    },
    methods:{
      down(){
        this.flags = true;
        var touch ;
        if(event.touches){
          touch = event.touches[0];
        }else {
          touch = event;
        }
        this.position.x = touch.clientX;
        this.position.y = touch.clientY;
        this.dx = moveDiv.offsetLeft;
        this.dy = moveDiv.offsetTop;
      },
      move(){
        if(this.flags){
          var touch ;
          if(event.touches){
            touch = event.touches[0];
          }else {
            touch = event;
          }
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx+this.nx;
          this.yPum = this.dy+this.ny;
          moveDiv.style.left = this.xPum+"px";
          moveDiv.style.top = this.yPum +"px";
          //阻止页面的滑动默认事件
          document.addEventListener("touchmove",function(){
            event.preventDefault();
          },false);
        }
      },
//鼠标释放时候的函数
      end(){
        this.flags = false;
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/common.scss";
  .popup{
    /*width: 500px;*/
    /*height: 600px;*/
    padding: 30px 0;
    line-height: 24px;
    background: url("../../../../static/images/intersection_1@2x.png") no-repeat right bottom;
    .box {
      width: 1030px;
      height: 670px;
      padding:0 45px;
      .highlight{
        color: $font-highlight;
        letter-spacing: 1px;
        span{
          vertical-align: top;
          font-size: 16px;
          line-height: 22px;
        }
      }
      h1{
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 24px;
      }
      h2{
        line-height: 30px;
        font-size: 18px;
        .tip{
          font-size: 18px;
          line-height: 31px;
        }
      }
      p{
        font-size: 14px;
        opacity: 0.8;
        margin-bottom: 6px;
        &.text-tip{
          margin-top: 15px;
          opacity: 0.6;
        }
      }

      ul{
        li{
          list-style: none;
          line-height: 26px;
          font-size: 14px;
          opacity: 0.8;
        }
        margin-bottom: 6px;
      }
    }
  }
</style>
